<template>
  <section>
    <!-- tool bar -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="frozen.conditions">
        <el-form-item>
          <el-input v-model="frozen.conditions.mobile" placeholder="还款人手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="conditionQuery">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- list -->
    <el-table :data="frozen.repays" highlight-current-row border v-loading="frozen.loading" style="width: 100%;">
      <el-table-column prop="project_no" label="项目id" width="120" fixed></el-table-column>
      <el-table-column prop="loan_name" label="标的名称" width="200"></el-table-column>
      <el-table-column prop="loan_apr" label="标的利率" width="120"></el-table-column>
      <el-table-column prop="loan_all_amount" label="标的金额" width="120"></el-table-column>
      <el-table-column prop="loan_user_id" label="借款人id" width="120"></el-table-column>
      <el-table-column prop="loan_user_name" label="借款人" width="120"></el-table-column>
      <el-table-column prop="mobile" label="借款电话" width="150"></el-table-column>
      <el-table-column prop="repay_all_amount" label="还款金额" width="120"></el-table-column>
      <el-table-column prop="loan_full_status" label="还款状态" width="100" :formatter="formatRepayStatus"></el-table-column>
      <el-table-column prop="is_froze_repay" label="还款冻结状态" width="130" :formatter="formatRepayFrozenStatus"></el-table-column>
      <el-table-column prop="cut_off_time" label="结算日期" width="200"></el-table-column>
      <el-table-column label="操作" width="200">
        <template scope="scope">
          <el-button @click="queryDetail(scope.$index, scope.row)" type="primary" size="small">查看明细</el-button>
          <el-button @click="submit(scope.$index, scope.row)" type="primary" size="small">还款冻结</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-col :span="24" class="toolbar">
      <el-pagination class="pagination" layout="prev, pager, next" :current-page="frozen.curPage" :page-size="frozen.pageSize"
        :total="frozen.total" @current-change="handleChange">
      </el-pagination>
    </el-col>
    <!-- hidden table -->
    <el-dialog title="还款明细" v-model="frozen.dialogVisible">
      <el-table :data="frozen.details" border v-loading="frozen.dialogLoading" style="width: 100%;">
        <el-table-column prop="repay_id" label="还款明细id号" width="120"></el-table-column>
        <el-table-column prop="project_no" label="项目id号" width="120"></el-table-column>
        <el-table-column prop="user_id" label="借款人id号" width="120"></el-table-column>
        <el-table-column prop="periods" label="还款总期数" width="120"></el-table-column>
        <el-table-column prop="period" label="还款期数" width="120"></el-table-column>
        <el-table-column prop="repay_principal_interest" label="还款金额" width="120"></el-table-column>
        <el-table-column prop="repayment_status" label="还款状态" width="120" :formatter="formatRepayDetailStatus"></el-table-column>
        <el-table-column prop="repay_await_date" label="还款日期" width="200"></el-table-column>
      </el-table>
    </el-dialog>
  </section>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'

  export default {
    computed: {
      ...mapGetters({
        frozen: 'frozenRepayment'
      })
    },

    methods: {
      ...mapActions([
        'getFrozenRepays',
        'queryRepayDetails',
        'confirmFrozenRepay'
      ]),
      formatRepayStatus(row, column) {
        let status;
        switch (row.loan_full_status) {
          case '0':
            status = '未满标';
            break;
          case '1':
            status = '满标未审核';
            break;
          case '2':
            status = '还款中';
            break;
          case '3':
            status = '已还款';
            break;
          case '4':
            status = '提前还款';
            break;
          case '5':
            status = '标的已下架';
            break;
          default:
            status = row.loan_full_status;
            break;
        }
        return status;
      },
      formatRepayFrozenStatus(row, column) {
        return row.is_froze_repay == 1 ? '已冻结' : '未冻结';
      },
      formatRepayDetailStatus(row, column) {
        let status;
        switch (row.repayment_status) {
          case '0':
            status = '未还款';
            break;
          case '1':
            status = '已还款';
            break;
          case '3':
            status = '提前还款';
            break;
          default:
            status = row.repayment_status;
            break;
        }
        return status;
      },
      conditionQuery() {
        this.getFrozenRepays({
          vm: this,
          page: 1
        });
      },
      reset() {
        this.frozen.conditions.mobile = '';
      },
      handleChange(val) {
        this.getFrozenRepays({
          vm: this,
          page: val
        });
      },
      queryDetail(index, row) {
        this.queryRepayDetails({
          vm: this,
          row
        });
      },
      submit(index, row) {
        this.confirmFrozenRepay({
          vm: this,
          index,
          row
        });
      }
    },

    mounted() {
      this.getFrozenRepays({
        vm: this
      });
    }
  }
</script>